<template>
    <div class="contioner">
      <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="日期" prop="beginDate">
            <a-date-picker  popup-container="html"  v-model="query.beginDate" :style="{ width: '180px' }" placeholder="选择开始日期" class="bacClass" />
          </a-form-item>
          <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
          <!-- <a-form-item label="厂区" prop="planOrderCode">
            <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.planOrderCode" />
          </a-form-item> -->
        </a-form>
        <div class="my-tool-bar" style="margin-bottom: 5px">
          <a-space>
            <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
            <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button>
          </a-space>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
  
      <div style="background-color: #f0f2f5; height: 10px"></div>
      <div :style="{ height: '89%', padding: '10px', }">
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef"
                class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc">
              </AgGridVuesCopys>
          </div>
    </div>
  </template>
    
  <script lang="ts" setup>

  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)
  
  
  const configCascader = ref<{}>({
      corporateWidth: '200px', //公司宽度
      sectorWidth: '180px', //部门宽度
      corporateRquired: false, //公司是否必填
      sectorRquired: false, //部门是否必填
      size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
      corporateName: '厂区', //公司label
      sectorName: '选择部门', //部门label
      cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
      const { corporateId, sectorId, sectorLabel, corporateLabel } = data
      query.planOrderCode = corporateId
  }
  
  interface Querin {
    beginDate: any
    planOrderCode: string
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY-MM-DD'), //当天日期
    planOrderCode: '',
  })
  
  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex:1
  }
  
  const tc = [
    {
      headerName: '织厂单位',
      field: 'firmName',
      width: 150
    },
    {
      headerName: '楼层',
      field: 'areaName',
      width: 150
    },
    {
      headerName: '机型',
      field: 'machineTypeName',
      width: 150
    },
    {
      headerName: '机台名称',
      field: 'machineName',
      width: 150
    },
    {
      headerName: '总机台数(台)',
      field: 'totalNum',
      width: 150
    },
    {
      headerName: '开机台数(台)',
      field: 'openNum',
      width: 150
    },
    {
      headerName: '开机占比(%)',
      field: 'ratio',
      width: 150
    },
  ]
  
  /**
   * 
    {
      headerName: '针寸数',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '客户名称',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '统计开始时间',
      field: 'mouthBigDecimal',//
      width: 150
    },
    {
      headerName: '统计结束时间',
      field: 'mouthBigDecimal',//
      width: 150
    },
   */
  
  function selectJt() {
    post({
      url: 'planSingle/report/openingMachine',
      data: {
        "firmId": query.planOrderCode, //公司ID
        "areaName": "", //机台类型
        "machineTypeName": "", //设备编号机器编号
        "date": query.beginDate //日期时间
      }
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList.value = res.data
      } else {
        Message.error(res.message)
      }
    })
  }
  
  
  const getList = () => {
    selectJt()
  }
  </script>
  <style scoped>
  .contioner {
    height: 100%;
    background: #fff;
  }
  
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }
  
  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
  
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
  </style>
      